<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<div id="o" style="border: 1px solid green;-webkit-user-select:none;" unselectable='on' onmousedown="return false">
    o
</div>
<div id="t3">
    <div id="t2" style="height: 500px;border: 1px solid red;">
        <input type="text" id="t"/>
    </div>
</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use('node', function (S, Node) {
        var $ = Node.all;

        document.body.focus();

        setTimeout(function () {
            $('#t').on('focus', function (e) {
                //console.log('e.x in t focus: '+(e.x));
                console.log('t focus: ' + (document.activeElement.nodeName));
            });
            $('#t3').on('focusin', function (e) {
                //console.log('e.x in t3 focusin: '+(e.x));
                console.log('t3 focusin: ' + (document.activeElement.nodeName));
            });
            $('#t2').on('focusin', function (e) {
                //console.log('e.x in t2 focusin: '+(e.x));

                console.log('t2 focusin: ' + (document.activeElement.nodeName));
            });

            // order is wrong
            $('#t').on('focusin', function (e) {
                //e.x=1;
                //console.log('e.x in t focusin: '+(e.x));
                e.halt();
                console.log('t focusin: ' + (document.activeElement.nodeName));
            });
            $('#o').on('click', function () {
                setTimeout(function () {
                    $('#t').fire('focus');
                }, 1000);
                setTimeout(function () {
                    console.log('second fire focus');
                    // only trigger currentTarget's focus handler if already focused
                    $('#t').fire('focus');
                }, 2000);
            });
        }, 1000);
    });
</script>
</body>
</html>